<template>
  <div id="login">
    <div class="middle">
      <div class="loginBox">
        <img src="@/assets/login/logo.png" alt class="logo" />
        <p class="managementSystem">荷福安建后台管理系统</p>
        <div class="passWordAndName" v-if="passWordAndName">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            class="demo-ruleForm"
          >
            <el-form-item prop="username" class="inputName">
              <el-input
                v-model="ruleForm.username"
                placeholder="请输入手机号/用户名"
                @keyup.enter.native="submit(ruleForm)"
                clearable
                class="edit"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password" class="password">
              <el-input
                v-model="ruleForm.password"
                placeholder="请输入密码"
                @keyup.enter.native="submit(ruleForm)"
                show-password
                class="edit"
              ></el-input>
            </el-form-item>
          </el-form>
          <img src="@/assets/login/message.png" class="message" />
          <div class="messageLogin" @click="verification">验证码登录</div>
          <div class="info">{{ loginInfo }}</div>
          <el-button
            type="info"
            plain
            :class="
              ruleForm.username && ruleForm.password
                ? 'immediateLogin'
                : 'rejectLogin'
            "
            @click="submit(ruleForm)"
            >立即登录</el-button
          >
        </div>

        <div class="passWordAndName" v-if="emailAndverification">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item prop="email" class="inputName">
              <el-input
                v-model="ruleForm.email"
                placeholder="请输入邮箱地址"
                class="edit"
              ></el-input>
            </el-form-item>
            <el-form-item prop="verification" class="verification">
              <el-input
                v-model="ruleForm.verification"
                placeholder="请输入验证码"
                clearable
                class="edit"
              ></el-input>
            </el-form-item>
            <el-button
              plain
              class="getVerification"
              @click="getVerification(ruleForm.email)"
              :disabled="disabled"
              >{{ getCodeInfo }}</el-button
            >
          </el-form>
          <img src="../../assets/login/password.png" class="message" />
          <div class="messageLogin" @click="verification">密码登录</div>
          <div class="info">{{ emailInfo }}</div>
          <el-button
            type="info"
            plain
            :class="
              ruleForm.email && ruleForm.verification
                ? 'immediateLogin'
                : 'rejectLogin'
            "
            @click="getEmailLogin(ruleForm)"
            >立即登录</el-button
          >
        </div>
        <router-link to="/findPassword" class="forgetPassword"
          >忘记密码？</router-link
        >
      </div>
    </div>
  </div>
</template>

<script>
import { getEmailCode, loginEmail } from '../../api/login'

import { setToken } from '../../utils/token'

import { removeProjectId } from '../../utils/projectId'

export default {
  data () {
    return {
      redirect: '',
      ruleForm: {
        username: '',
        password: '',
        email: '',
        verification: ''
      },
      disabled: false,
      passWordAndName: true,
      emailAndverification: false,
      loginInfo: '',
      emailInfo: '',
      flag: 0,
      getCodeInfo: '获取验证码',
      resetTime: '',
      time: 60,
      emailAndCode: [],
      rules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: ['change']
          },
          {
            min: 1,
            max: 12,
            message: '用户名长度在 6 到 12 个字符',
            trigger: ['change']
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: ['change']
          },
          {
            min: 3,
            max: 12,
            message: '密码长度在 6 到 12 个字符',
            trigger: ['blur', 'change']
          }
        ],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change']
          }
        ],
        verification: [
          {
            required: true,
            message: '请输入验证码',
            trigger: ['blur', 'change']
          },
          {
            min: 4,
            max: 6,
            message: '验证码长度在 4到 6 个字符',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },
  methods: {
    submit (val) {
      if (this.passWordAndName) {
        // const { username, password } = val
        this.$refs.ruleForm.validate(async valid => {
          if (valid) {
            const res = await this.$store
              .dispatch('user/userLogin', val)
              .then(res => {
                this.loginInfo = res.data.msg
                return res
              })
            await this.$store.dispatch('user/getUserInfo')
            const routes = await this.$store.dispatch(
              'permission/generateRoutes'
            )
            await this.$router.addRoutes(routes)
            if (res.data.code === '200') {
              setToken(res.data.token)
              // this.$router.push(this.redirect || '/')
              this.$router.push('/projectMain')
              this.$message({
                message: '登录成功',
                type: 'success',
                duration: 1000
              })
            } else {
              if (this.flag === 0) {
                this.flag = 1
                this.$message({
                  message: '用户名或密码错误',
                  type: 'error',
                  onClose: () => {
                    this.flag = 0
                  }
                })
              }
              return false
            }
          } else {
            return false
          }
        })
      }
    },
    verification () {
      this.passWordAndName = !this.passWordAndName
      this.emailAndverification = !this.emailAndverification
    },
    getVerification (val) {
      getEmailCode(val).then(res => {
        // console.log(res)
        if (res.data.code === 200) {
          // 唯一邮箱
          this.disabled = true
          this.getCodeInfo = '重新发送' + this.time
          this.resetTime = setInterval(() => {
            this.time--
            this.getCodeInfo = '重新发送' + this.time
            if (this.time === 0) {
              clearInterval(this.resetTime)
              this.time = 60
              this.getCodeInfo = '获取验证码'
              this.disabled = false
            }
          }, 1000)
        } else {
          this.emailInfo = res.data.message
        }
      })
    },
    getEmailLogin (val) {
      // console.log(val)
      const { email, verification } = val
      this.$refs.ruleForm.validate(vaild => {
        if (vaild) {
          loginEmail(verification, email).then(res => {
            if (res.data.code === '200') {
              setToken(res.data.token)
              this.emailInfo = res.data.msg
            } else {
              this.emailInfo = res.data.msg
            }
          })
        }
      })
    },
    // 获取页面重定向的地址
    getRedirect () {
      if (this.$route.query.redirect) {
        this.redirect = this.$route.query.redirect
      }
    }
  },
  created () {
    sessionStorage.removeItem('firstNavIndex')
    sessionStorage.removeItem('secondNavIndex')
    this.getRedirect()
    removeProjectId()
  }
}
</script>

<style scoped lang="scss">
* {
  padding: 0;
  margin: 0;
}
#login {
  height: 100%;
  width: 100%;
  position: relative;
  overflow-x: hidden;
  .middle {
    width: 100%;
    height: 100%;
    background-image: url("../../assets/login/background.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0 auto;
    position: relative;
    top: 0;
    left: 0;
    border-top: 1px solid transparent;
    .loginBox {
      width: 560px;
      height: 600px;
      background: rgba(255, 255, 255, 1);
      margin: 240px 0 0 1220px;
      position: relative;
      .logo {
        position: absolute;
        width: 60px;
        height: 60px;
        top: 48px;
        left: 50%;
        transform: translateX(-50%);
      }
      .managementSystem {
        position: absolute;
        width: 100%;
        height: 33px;
        top: 124px;
        text-align: center;
        font-size: 28px;
        color: #4f7fee;
      }
      .passWordAndName {
        position: relative;
        line-height: 50px;
          ::v-deep .el-input {
            line-height: 50px;
          }

        .inputName {
          width: 400px;
          height: 50px;
          line-height: 50px;
          border-radius: 5px;
          position: absolute;
          top: 206px;
          left: 50%;
          transform: translateX(-50%);
        }
        .password {
          width: 400px;
          height: 50px;
          line-height: 50px;
          border-radius: 5px;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: 288px;
        }
        .verification {
          width: 270px;
          height: 50px;
          border-radius: 5px;
          position: absolute;
          left: 80px;
          top: 288px;
        }
        .getVerification {
          height: 50px;
          width: 120px;
          position: absolute;
          right: 80px;
          top: 288px;
        }
      }

      .message {
        width: 24px;
        height: 24px;
        position: absolute;
        top: 458px;
        left: 80px;
        cursor: pointer;
      }
      .messageLogin {
        height: 20px;
        font-size: 14px;
        font-family: Noto Sans SC;
        color: rgba(40, 100, 251, 1);
        line-height: 0.2rem;
        position: absolute;
        left: 114px;
        top: 458px;
        cursor: pointer;
      }
      .info {
        height: 17px;
        position: absolute;
        top: 441px;
        margin-bottom: 10px;
        font-size: 12px;
        font-weight: 400;
        color: rgba(255, 38, 38, 1);
        line-height: 17px;
        font-family: Noto Sans SC;
        text-align: center;
        left: 50%;
        transform: translateX(-50%);
      }
      .immediateLogin {
        width: 400px;
        height: 56px;
        background: #2864fb;
        border-radius: 5px;
        position: absolute;
        top: 380px;
        left: 50%;
        transform: translateX(-50%);
        color: #ffffff;
      }
      .rejectLogin {
        width: 400px;
        height: 56px;
        color: #ffffff;
        background: rgba(230, 230, 230, 1);
        border-radius: 5px;
        position: absolute;
        top: 380px;
        left: 50%;
        transform: translateX(-50%);
      }
      .forgetPassword {
        height: 19px;
        font-size: 14px;
        font-family: Helvetica;
        color: rgba(153, 153, 153, 1);
        line-height: 17px;
        position: absolute;
        top: 458px;
        right: 80px;
        text-align: center;
        border-bottom: 1px rgba(153, 153, 153, 1) solid;
      }
    }
  }
}
::v-deep .el-input__inner {
  height: 50px;
  line-height: 0;
}
</style>
